<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>大数据分析模板</title>
    <script typet="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
    <script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>
    <script language="javascript">
        //                禁止浏览器缩放
        //        var scrollFunc=function(e){
        //            e=e || window.event;
        //            if(e.wheelDelta && event.ctrlKey){//IE/Opera/Chrome
        //                event.returnValue=false;
        //            }else if(e.detail){//Firefox
        //                event.returnValue=false;
        //            }
        //        };
        /*注册事件*/
        if (document.addEventListener) {
            document.addEventListener('DOMMouseScroll', scrollFunc, false);
        }//W3C
        window.onmousewheel = document.onmousewheel = scrollFunc;//IE/Opera/Chrome/Safari
        //        动态设置高度
        $(function () {
            var height = $(window).height();
            $("body").height(height);
        })
    </script>
    <style>
        /*全局css*/
        body, html {
            width: 100%;
            height: 100%;
            background: url("img/body_bg.png");
            background-size: 100% 100%;
        }

        * {
            margin: 0;
            padding: 0;
        }

        /*头部*/
        header {
            height: 13%;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        header img {
            width: 50%;
            position: absolute;
            margin-top: 1%
        }

        /*主内容*/
        .main_content {
            display: flex;
            justify-content: space-around;
            height: 87%;
            border: 0 solid white;
            margin-top: -1%;
        }

        /*左内容*/
        .left_content {
            width: 30%;
            height: 100%;
            border: 1px solid #0b6379;
        }

        .img_header {
            height: 25%;
            width: 30%;
            border: 1px solid #0b6379;
            margin: 3%;
            float: left
        }

        .img_header img {
            width: 100%;
            height: 100%
        }

        .stu_info {
            border: 1px solid #0b6379;
            width: 60%;
            height: 25%;
            position: absolute;
            float: left;
            margin-left: 37%;
            margin-top: 3%;
        }

        .stu_info span:nth-child(1) {
            position: absolute;
            margin: 6% 0 0 6%;
        }

        .stu_info span:nth-child(2) {
            position: absolute;
            margin: 6% 0 0 58%
        }

        .stu_info span:nth-child(3) {
            position: absolute;
            margin: 17% 0 0 6%;
        }

        .stu_info span:nth-child(4) {
            position: absolute;
            margin: 17% 0 0 58%
        }

        .stu_info span:nth-child(5) {
            position: absolute;
            margin: 28% 0 0 6%
        }

        .stu_info span:nth-child(6) {
            position: absolute;
            margin: 39% 0 0 6%
        }

        .stu_info span:nth-child(7) {
            position: absolute;
            margin: 50% 0 0 6%
        }

        .stu_info input {
            width: 30%;
            border: 0;
            margin-left: 1%;
            height: 20px;
            margin-top: 1%
        }

        .stu_info span {
            color: #54DFE3;
            font-size: 15px;
            margin-left: 1%
        }

        /*三大模块*/
        .item {
            width: 94%;
            border: 1px solid #0b6379;
            height: 23%;
            margin-top: 45%;
            margin-left: 3%;
            display: flex;
            justify-content: space-around;
            align-items: center;
            flex-direction: row;

        }

        .item_list {
            width: 100px;
            height: 100px;
            border-radius: 50px;
            border: 1px solid #54DFE3;
            text-align: center;
            line-height: 100px;
            color: white;
            font-size: 25px;
            font-weight: bold;
            box-shadow: 5px 0px 0px #4F9D9D;
        }

        .it1 {
            text-align: center;
            color: #54DFE3
        }

        h4 {
            margin-top: 5px
        }

        /*数据表格*/
        .data {
            width: 94%;
            margin-left: 3%;
            border: 1px solid #0b6379;
            height: 43%;
            margin-top: 3%
        }

        /*右内容*/
        .right_content {
            width: 65%;
            height: 100%;
            border: 1px solid #0b6379;
        }

        #content {
            width: 95%;
            height: 50%;
            border: 1px solid #0b6379;
            margin-left: 2.5%;
            margin-top: 2%;
            padding-top: 1%
        }

        #content_bottom {
            width: 95%;
            height: 40%;
            border: 1px solid #0b6379;
            margin-left: 2.5%;
            margin-top: 2%;
        }
    </style>
</head>
<body>
<header>
    <img src="https://img.alicdn.com/tps/TB1Pg3pPXXXXXcxXpXXXXXXXXXX-1920-1080.gif" alt="">
    <h2 style="margin-top: -3%;color: white">Eurasia人物画像数据分析</h2>
</header>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div class="main_content">
    <div class="left_content" style="position: relative">
        <!--四个角加粗-->
        <span style="position: absolute;
        padding:15px;
        border-style: solid;
        border-color: #02C2E1;
        border-width: 5px 0 0 5px;
        top:-5px;
        left:-5px;"></span>
        <span style="position: absolute;
        padding:15px;
        border-style: solid;
        border-color: #02C2E1;
        border-width: 5px 5px 0 0;
        top:-5px;
        right:-5px;"></span>
        <span style="position: absolute;
        padding:15px;
        border-style: solid;
        border-color: #02C2E1;
        border-width: 0 5px 5px 0;
        bottom:-5px;
        right:-5px;"></span>
        <span style="position: absolute;
        padding:15px;
        border-style: solid;
        border-color: #02C2E1;
        border-width: 0px 0px 5px 5px;
        bottom:-5px;
        left:-5px;"></span>
        <!--头像-->
        <div class="img_header">
            <img src="./img/head_img.jpg" alt="">
        </div>
        <!--基本信息-->
        <div class="stu_info">
            <span>姓名：二狗</span>
            <span>年级：2014级</span>
            <span>专业：软件工程</span>
            <span>年龄：24岁</span>
            <span>分院：信息工程学院</span>
            <span>社区：第一青年社区</span>
            <span>学号：14610801152313</span>
        </div>
        <!--三大模块-->
        <div class="item">
            <div class="it1">
                <div class="item_list">
                    2014
                </div>
                <h4>入学年份</h4>
            </div>
            <div class="it1">
                <div class="item_list">
                    20
                </div>
                <h4>学分/分</h4>
            </div>
            <div class="it1">
                <div class="item_list">
                    50
                </div>
                <h4>学时/小时</h4>
            </div>
        </div>
        <!--数据表格,荣誉数量-->
        <div class="data" id="data">

        </div>
    </div>
    <div class="right_content" style="position: relative">
        <!--四个角加粗-->
        <span style="position: absolute;
        padding:15px;
        border-style: solid;
        border-color: #02C2E1;
        border-width: 5px 0 0 5px;
        top:-5px;
        left:-5px;"></span>
        <span style="position: absolute;
        padding:15px;
        border-style: solid;
        border-color: #02C2E1;
        border-width: 5px 5px 0 0;
        top:-5px;
        right:-5px;"></span>
        <span style="position: absolute;
        padding:15px;
        border-style: solid;
        border-color: #02C2E1;
        border-width: 0px 5px 5px 0;
        bottom:-5px;
        right:-5px;"></span>
        <span style="position: absolute;
        padding:15px;
        border-style: solid;
        border-color: #02C2E1;
        border-width: 0 0 5px 5px;
        bottom:-5px;
        left:-5px;"></span>
        <div id="content">

        </div>
        <div id="content_bottom">

        </div>
    </div>
</div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts图表
    var myChart = echarts.init(document.getElementById('data'));

    var option = {
        title: {
            textStyle: {
                fontSize: 18,
                color: 'white'
            },
            x: 'center',
            text: '荣誉数量分布图',
            subtext: 'Rainbow bar example',
            link: 'http://echarts.baidu.com/doc/example.html'
        },
        tooltip: {
            trigger: 'item'
        },
        toolbox: {
            show: true,
            feature: {
                dataView: {show: true, readOnly: false},
                restore: {show: true},
                saveAsImage: {show: true}
            }
        },
        calculable: true,
        grid: {
            borderWidth: 0,
            y: 50,
            y2: 40
        },
        xAxis: [
            {
                type: 'category',
                show: false,
                data: ['个人证书', '学术论文', '发明专利', '竞赛奖项', "公益志愿"]
            }
        ],
        yAxis: [
            {
                type: 'value',
                show: false
            }
        ],
        series: [
            {
                name: '荣誉数量统计',
                type: 'bar',
                itemStyle: {
                    normal: {
                        color: function (params) {
                            // build a color map as your need.
                            var colorList = [
                                '#C1232B', '#B5C334', '#FCCE10', '#E87C25', '#27727B',
                                '#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD',
                                '#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0'
                            ];
                            return colorList[params.dataIndex]
                        },
                        label: {
                            show: true,
                            position: 'top',
                            formatter: '{b}\n{c}'
                        }
                    }
                },
                data: [12, 21, 10, 4, 12],
                markPoint: {
                    tooltip: {
                        trigger: 'item',
                        backgroundColor: 'rgba(0,0,0,0)',
                        formatter: function (params) {
                            return '<img src="'
                                + params.data.symbol.replace('image://', '')
                                + '"/>';
                        }
                    },
                    data: [
                        {xAxis: 0, y: 350, name: 'Line', symbolSize: 20, symbol: 'image://../asset/ico/折线图.png'},
                        {xAxis: 1, y: 350, name: 'Bar', symbolSize: 20, symbol: 'image://../asset/ico/柱状图.png'},
                        {xAxis: 2, y: 350, name: 'Scatter', symbolSize: 20, symbol: 'image://../asset/ico/散点图.png'},
                        {xAxis: 3, y: 350, name: 'K', symbolSize: 20, symbol: 'image://../asset/ico/K线图.png'},
                        {xAxis: 4, y: 350, name: 'Pie', symbolSize: 20, symbol: 'image://../asset/ico/饼状图.png'},
                        {xAxis: 5, y: 350, name: 'Radar', symbolSize: 20, symbol: 'image://../asset/ico/雷达图.png'},
                        {xAxis: 6, y: 350, name: 'Chord', symbolSize: 20, symbol: 'image://../asset/ico/和弦图.png'},
                        {xAxis: 7, y: 350, name: 'Force', symbolSize: 20, symbol: 'image://../asset/ico/力导向图.png'},
                        {xAxis: 8, y: 350, name: 'Map', symbolSize: 20, symbol: 'image://../asset/ico/地图.png'},
                        {xAxis: 9, y: 350, name: 'Gauge', symbolSize: 20, symbol: 'image://../asset/ico/仪表盘.png'},
                        {xAxis: 10, y: 350, name: 'Funnel', symbolSize: 20, symbol: 'image://../asset/ico/漏斗图.png'},
                    ]
                }
            }
        ]
    };
    setTimeout(function () {
        var _ZR = myChart.getZrender();
        var TextShape = require('zrender/shape/Text');
        // 补充千层饼
        _ZR.addShape(new TextShape({
            style: {
                x: _ZR.getWidth() / 2,
                y: _ZR.getHeight() / 2,
                color: '#fff',
                text: '恶梦的过去',
                textAlign: 'center'
            }
        }));
        _ZR.addShape(new TextShape({
            style: {
                x: _ZR.getWidth() / 2 + 200,
                y: _ZR.getHeight() / 2,
                brushType: 'fill',
                color: '#fff',
                text: '美好的未来',
                textAlign: 'left',
                textFont: 'normal 20px 微软雅黑'
            }
        }));
        _ZR.refresh();
    }, 2000);


    // 为echarts对象加载数据
    myChart.setOption(option);
</script>

<script type="text/javascript">
    // 基于准备好的dom，初始化echarts图表
    var myChart = echarts.init(document.getElementById('content'));

    var labelTop = {
        normal: {
            label: {
                show: true,
                position: 'center',
                formatter: '{b}',
                textStyle: {
                    baseline: 'bottom'
                }
            },
            labelLine: {
                show: false
            }
        }
    };
    var labelFromatter = {
        normal: {
            label: {
                formatter: function (params) {
                    return 100 - params.value + '%'
                },
                textStyle: {
                    baseline: 'top'
                }
            }
        },
    }
    var labelBottom = {
        normal: {
            color: '#ccc',
            label: {
                show: true,
                position: 'center'
            },
            labelLine: {
                show: false
            }
        },
        emphasis: {
            color: 'rgba(0,0,0,0)'
        }
    };
    var radius = [40, 55];
    option = {
        legend: {
            x: 'center',
            y: 'center',
            data: [
                '生活交流', '学术科技', '公益志愿', '文艺体育', '社会实践',
                '创新创业', '就业创业', '专利发明', '竞赛奖项', '学术论文'
            ]
        },
        title: {
            text: '学分活动详情',
            subtext: 'from global web index',
            x: 'center',
            textStyle: {
                fontSize: 18,
                color: 'white'
            },
        },
        toolbox: {
            show: true,
            feature: {
                dataView: {show: true, readOnly: false},
                magicType: {
                    show: true,
                    type: ['pie', 'funnel'],
                    option: {
                        funnel: {
                            width: '20%',
                            height: '30%',
                            itemStyle: {
                                normal: {
                                    label: {
                                        formatter: function (params) {
                                            return 'other\n' + params.value + '%\n'
                                        },
                                        textStyle: {
                                            baseline: 'middle'
                                        }
                                    }
                                },
                            }
                        }
                    }
                },
                restore: {show: true},
                saveAsImage: {show: true}
            }
        },
        series: [
            {
                type: 'pie',
                center: ['10%', '30%'],
                radius: radius,
                x: '0%', // for funnel
                itemStyle: labelFromatter,
                data: [
                    {name: 'other', value: 46, itemStyle: labelBottom},
                    {name: '生活交流', value: 54, itemStyle: labelTop}
                ]
            },
            {
                type: 'pie',
                center: ['30%', '30%'],
                radius: radius,
                x: '20%', // for funnel
                itemStyle: labelFromatter,
                data: [
                    {name: 'other', value: 56, itemStyle: labelBottom},
                    {name: '学术科技', value: 44, itemStyle: labelTop}
                ]
            },
            {
                type: 'pie',
                center: ['50%', '30%'],
                radius: radius,
                x: '40%', // for funnel
                itemStyle: labelFromatter,
                data: [
                    {name: 'other', value: 65, itemStyle: labelBottom},
                    {name: '公益志愿', value: 35, itemStyle: labelTop}
                ]
            },
            {
                type: 'pie',
                center: ['70%', '30%'],
                radius: radius,
                x: '60%', // for funnel
                itemStyle: labelFromatter,
                data: [
                    {name: 'other', value: 70, itemStyle: labelBottom},
                    {name: '文艺体育', value: 30, itemStyle: labelTop}
                ]
            },
            {
                type: 'pie',
                center: ['90%', '30%'],
                radius: radius,
                x: '80%', // for funnel
                itemStyle: labelFromatter,
                data: [
                    {name: 'other', value: 73, itemStyle: labelBottom},
                    {name: '社会实践', value: 27, itemStyle: labelTop}
                ]
            },
            {
                type: 'pie',
                center: ['10%', '70%'],
                radius: radius,
                y: '55%',   // for funnel
                x: '0%',    // for funnel
                itemStyle: labelFromatter,
                data: [
                    {name: 'other', value: 78, itemStyle: labelBottom},
                    {name: '创新创业', value: 22, itemStyle: labelTop}
                ]
            },
            {
                type: 'pie',
                center: ['30%', '70%'],
                radius: radius,
                y: '55%',   // for funnel
                x: '20%',    // for funnel
                itemStyle: labelFromatter,
                data: [
                    {name: 'other', value: 78, itemStyle: labelBottom},
                    {name: '就业创业', value: 22, itemStyle: labelTop}
                ]
            },
            {
                type: 'pie',
                center: ['50%', '70%'],
                radius: radius,
                y: '55%',   // for funnel
                x: '40%', // for funnel
                itemStyle: labelFromatter,
                data: [
                    {name: 'other', value: 78, itemStyle: labelBottom},
                    {name: '专利发明', value: 22, itemStyle: labelTop}
                ]
            },
            {
                type: 'pie',
                center: ['70%', '70%'],
                radius: radius,
                y: '55%',   // for funnel
                x: '60%', // for funnel
                itemStyle: labelFromatter,
                data: [
                    {name: 'other', value: 83, itemStyle: labelBottom},
                    {name: '竞赛奖项', value: 17, itemStyle: labelTop}
                ]
            },
            {
                type: 'pie',
                center: ['90%', '70%'],
                radius: radius,
                y: '55%',   // for funnel
                x: '80%', // for funnel
                itemStyle: labelFromatter,
                data: [
                    {name: 'other', value: 89, itemStyle: labelBottom},
                    {name: '学术论文', value: 11, itemStyle: labelTop}
                ]
            }
        ]
    };
    setTimeout(function () {
        var _ZR = myChart.getZrender();
        var TextShape = require('zrender/shape/Text');
        // 补充千层饼
        _ZR.addShape(new TextShape({
            style: {
                x: _ZR.getWidth() / 2,
                y: _ZR.getHeight() / 2,
                color: '#fff',
                text: '恶梦的过去',
                textAlign: 'center'
            }
        }));
        _ZR.addShape(new TextShape({
            style: {
                x: _ZR.getWidth() / 2 + 200,
                y: _ZR.getHeight() / 2,
                brushType: 'fill',
                color: '#fff',
                text: '美好的未来',
                textAlign: 'left',
                textFont: 'normal 20px 微软雅黑'
            }
        }));
        _ZR.refresh();
    }, 2000);


    // 为echarts对象加载数据
    myChart.setOption(option);
</script>


<script type="text/javascript">
    // 基于准备好的dom，初始化echarts图表
    var myChart = echarts.init(document.getElementById('content_bottom'));

    var option = {
        title: {
            text: '个人能力分析数据统计',
            subtext: '数据来源：图文信息中心',
            textStyle: {
                fontSize: 18,
                color: 'white'
            },
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            orient: 'vertical',
            x: 'right',
            y: 'bottom',
            data: ['用户个人能力', '学校平均能力']
        },
        toolbox: {
            show: true,
            feature: {
                mark: {show: true},
                dataView: {show: true, readOnly: false},
                restore: {show: true},
                saveAsImage: {show: true}
            }
        },
        polar: [
            {
                indicator: [
                    {
                        text: '文体特长', max: 6000, name: {
                        show: true,
                        formatter: null,
                        textStyle: {
                            color: 'white'
                        }
                    }
                    },
                    {
                        text: '信用记录', max: 16000, name: {
                        show: true,
                        formatter: null,
                        textStyle: {
                            color: 'white'
                        }
                    }
                    },
                    {
                        text: '组织能力', max: 30000, name: {
                        show: true,
                        formatter: null,
                        textStyle: {
                            color: 'white'
                        }
                    }
                    },
                    {
                        text: '创新实践', max: 38000, name: {
                        show: true,
                        formatter: null,
                        textStyle: {
                            color: 'white'
                        }
                    }
                    },
                    {
                        text: '学习能力', max: 52000, name: {
                        show: true,
                        formatter: null,
                        textStyle: {
                            color: 'white'
                        }
                    }
                    },
                    {
                        text: '沟通能力', max: 25000, name: {
                        show: true,
                        formatter: null,
                        textStyle: {
                            color: 'white'
                        }
                    }
                    }
                ],
            }
        ],
        calculable: true,
        series: [
            {
                name: '个人能力分析数据统计',
                type: 'radar',
                data: [
                    {
                        value: [4300, 10000, 28000, 35000, 50000, 19000],
                        name: '用户个人能力',
                    },
                    {
                        value: [5000, 14000, 28000, 31000, 42000, 21000],
                        name: '学校平均能力'
                    }
                ]
            }
        ]
    };
    setTimeout(function () {
        var _ZR = myChart.getZrender();
        var TextShape = require('zrender/shape/Text');
        // 补充千层饼
        _ZR.addShape(new TextShape({
            style: {
                x: _ZR.getWidth() / 2,
                y: _ZR.getHeight() / 2,
                color: '#fff',
                text: '恶梦的过去',
                textAlign: 'center'
            }
        }));
        _ZR.addShape(new TextShape({
            style: {
                x: _ZR.getWidth() / 2 + 200,
                y: _ZR.getHeight() / 2,
                brushType: 'fill',
                color: '#fff',
                text: '美好的未来',
                textAlign: 'left',
                textFont: 'normal 20px 微软雅黑'
            }
        }));
        _ZR.refresh();
    }, 2000);
    // 为echarts对象加载数据
    myChart.setOption(option);
</script>
</body>
</html>